'use strict'
const path = require('path')
const webpack = require('webpack')
const vueLoaderConfig = require('./vue-loader.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        app: './src/main.js'
    },
    mode: 'production',
    output: {
        publicPath: '/',
        path: path.join(__dirname, 'dist'),
        filename: './static/js/[name].[hash].js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig,
            exclude: /node_modules/
        }, {
            test: /\.less/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ],
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'url-loader',
            query: {
                // 把较小的图片转换成base64的字符串内嵌在生成的js文件里
                limit: 10000,
                // 路径要与当前配置文件下的publicPath相结合
                name: './static/img/[name].[ext]?[hash:7]'
            }
        }, {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            loader: 'url-loader',
            query: {
                // 把较小的图标转换成base64的字符串内嵌在生成的js文件里    
                limit: 10000,
                name: './static/fonts/[name].[ext]?[hash:7]',
            }
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }, ],
    },
    optimization: {
        splitChunks: {
            chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: true,
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
        new ExtractTextPlugin({
            filename: './static/css/[name].[hash].css'
        }),
        new webpack.HotModuleReplacementPlugin(),

    ],
    resolve: {
        extensions: ['.ts', '.js', '.vue', '.json'],
        alias: {
            '@': path.join(__dirname, '..', 'src')
        }
    },
}